<template>
  <view class="maoScroll-main" :style="'height:' + (lineHeight*showLine) + 'rpx;'">
    <view :style="'margin-top:-' + marginTop + 'rpx;'">
      <view v-for="(item,index) in list" :key="index" :style="'line-height:' + lineHeight + 'rpx;'">
        <view class="line u-font-24">{{$u.timeFrom(item.createtime, 'yyyy年mm月dd日')}},{{item.name || ""}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "notice-scroll",
  data() {
    return {
      list: [],
      marginTop: 0,
      showLine: 0,
    };
  },
  props: {
    // 列表
    noticeList: {
      type: Array,
      default: () => [],
    },
    // 条数
    showNum: {
      type: Number,
      default: 2,
    },
    // 行高
    lineHeight: {
      type: Number,
      default: 60,
    },
    // 秒数
    animationScroll: {
      type: Number,
      default: 500,
    },
    // 秒数
    animation: {
      type: Number,
      default: 2000,
    },
  },
  methods: {
    init() {
      this.showLine =
        this.showNum < this.noticeList.length
          ? this.showNum
          : this.noticeList.length;
      for (let i = 0; i < this.noticeList.length; i++) {
        this.list.push(this.noticeList[i]);
      }
      for (let i = 0; i < this.showLine; i++) {
        this.list.push(this.noticeList[i]);
      }
      setInterval(this.animationFunc, this.animation);
    },
    animationFunc() {
      if (this.marginTop >= this.noticeList.length * this.lineHeight) {
        this.marginTop = 0;
      }
      let stepTime = this.animationScroll / this.lineHeight;

      var step = 0;
      let self = this;
      var index = setInterval(function () {
        self.marginTop = self.marginTop + 1;
        step++;
        if (step >= self.lineHeight) {
          clearInterval(index);
        }
      }, stepTime);
    },
  },
  watch: {
    noticeList(newValue) {
      this.init();
    },
  },
};
</script>

<style lang="scss" scoped>
.maoScroll-main {
  width: 100%;
  overflow: hidden;
}
</style>
